<template>
  <Page class="p-4">
    <h1 class="text-2xl font-bold mb-4">虚拟表格示例</h1>
    <p class="mb-6 text-gray-600">本示例展示 Vue 3 虚拟表格组件，支持大数据量渲染，可切换虚拟滚动模式。</p>

    <div class="mb-6 flex items-center gap-4">
      <button
        @click="handleAddData"
        class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
      >
        添加 1000 条数据
      </button>

      <button
        @click="handleRemoveData"
        class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors"
        :disabled="tableData.length === 0"
      >
        删除 1000 条数据
      </button>

      <button
        @click="toggleVirtualMode"
        class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors"
      >
        {{ isVirtual ? '关闭虚拟滚动' : '开启虚拟滚动' }}
      </button>
    </div>

    <!-- 虚拟表格组件 -->
    <VirtualTable v-if="isVirtual" :data="tableData" :columns="tableColumns" :rowHeight="44" class="mb-4" />

    <!-- 非虚拟滚动模式（用于小数据量测试） -->
    <div v-else class="overflow-auto h-96 border rounded-md" style="height: 500px; overflow-y: auto">
      <table class="min-w-full bg-white">
        <thead>
          <tr>
            <th
              v-for="column in tableColumns"
              :key="column.key"
              :style="{ width: `${column.width}px` }"
              class="px-6 py-3 border-b-2 border-gray-300 text-sm font-semibold text-left"
            >
              {{ column.title }}
            </th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in tableData" :key="item.id" class="hover:bg-gray-50 transition-colors">
            <td
              v-for="column in tableColumns"
              :key="column.key"
              :style="{ width: `${column.width}px` }"
              class="px-6 py-4 border-b border-gray-200 text-sm"
            >
              {{ getItemValue(item, column.key) }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="text-sm text-gray-500">
      当前记录数：
      <span class="font-medium">{{ tableData.length }}</span>
    </div>
  </Page>
</template>
  
  <script setup>
import { ref, computed } from 'vue'
import VirtualTable from '@/components/virtualTable/index'
import Page from '@/components/page/index'
let index = 0
// 数据生成器
const createDataItem = () => ({
  id: index++,
  name: `用户${index}`,
  age: Math.floor(Math.random() * 50) + 18,
  email: `user${index}@example.com`,
  address: `城市${Math.floor(Math.random() * 10) + 1}, 街道${Math.floor(Math.random() * 100) + 1}`
})

// 状态管理
const isVirtual = ref(true)
const tableData = ref(Array.from({ length: 10000 }, createDataItem))

// 列配置
const tableColumns = computed(() => [
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: '姓名', width: 120 },
  { key: 'age', title: '年龄', width: 80 },
  { key: 'email', title: '邮箱', width: 200 },
  { key: 'address', title: '地址', width: 240 }
])

// 获取单元格值（支持函数取值）
const getItemValue = (item, key) => (typeof key === 'function' ? key(item) : item[key])

// 数据操作方法
const handleAddData = () => {
  const newData = Array.from({ length: 1000 }, (_, i) => createDataItem(tableData.value.length + i))
  tableData.value = [...tableData.value, ...newData]
}

const handleRemoveData = () => {
  tableData.value = tableData.value.slice(0, Math.max(0, tableData.value.length - 1000))
}

// 模式切换
const toggleVirtualMode = () => {
  isVirtual.value = !isVirtual.value
}
</script>
  
  <style scoped>
/* 非虚拟模式表格样式优化 */
.overflow-auto {
  height: 500px;
  overflow-y: auto;
}

/* 公共表格样式 */
th,
td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>